<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header" :style="{backgroundColor:`rgba(250, 250, 250,${data.transparency})`}">
			<view class="" :style="{height: data.statusbarHeight+'px'}">
			</view>
			<view class="flex">
				<view class="round" @click="getback" :style="{backgroundColor:`rgba(231, 231, 231,${1-data.transparency})`}">
					<uni-icons size="26" type="arrowleft" />
				</view>
				<view class="nav">
					<view class="navitem" v-for="(item,index) in data.nav_list" @click="changNavId(item)" :style="{color:data.nav_id!=item.id ? `rgba(25, 25, 25,${data.transparency})`
					: `rgba(241, 0, 0,${data.transparency})`  }">
						{{item.text}}
					</view>
				</view>
				<view class="round" @click="share" :style="{backgroundColor:`rgba(231, 231, 231,${1-data.transparency})`}">
					<uni-icons size="26" type="redo" />
				</view>
			</view>

		</view>

		<scroll-view scroll-y=true style="height: 100vh;" @scroll="scroll" :scroll-top="data.scrollTop"
			:scroll-into-view="data.scrollId" scroll-with-animation="true" v-show="data.goodsdetali.name">
			<!-- 商品 -->
			<view class="commodity" ref="commodity">
				<swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#FA301B" circular
					indicator-dots="true">
					<swiper-item v-if="data.goodsdetali.video">
						<video style="width: 100%;height: 100%;" :src="data.goodsdetali.video" controls></video>
					</swiper-item>
					<swiper-item v-for="(item,index) in data.list">
						<image  @click="previewImage" :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view class="commoditybox">

					<view class="price">
						<view class="left">
							￥{{$toFiexd(data.goodsdetali.price+data.goodsdetali.coupon,2)}}
						<!-- 	<view class="prices" v-if="data.goodsdetali.market">
								￥{{$toFiexd(data.goodsdetali.market,2)}}
							</view> -->

						</view>
						<view class="right">
							库存：{{data.goodsdetali.stock}}
						</view>
					</view>
					<text>	现金：{{$toFiexd(data.goodsdetali.price,2)}}</text>
					<text v-if="data.goodsdetali.coupon>0">{{data.goodsdetali.is_single==4?'DL':'ZKFC'}}：{{$toFiexd(data.goodsdetali.coupon,2)}}</text>
					<view class="namebox">
						<view class="name">
							{{data.goodsdetali.name}}
						</view>
						<view class="nbb">
							<view class="left">
								<text>正品</text>
								<text>月销:{{data.goodsdetali.sales+data.goodsdetali.virtually_sales}}</text>
							</view>
							<view class="left">
								<text v-show="false"></text>
								<text v-show="data.goodsdetali.is_pv==1">PV值：{{data.goodsdetali.pv}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 店铺 -->
			<view class="evaluate box" :id="'scrollView'+data.nav_list[0].id">
				<view class="title">
					店铺
				</view>
				<view class="business" v-if="data.goodsdetali.business">
					<view class="businessimage">
						<image :src="data.options.length!=3?data.goodsdetali.business.shop_head:$store.state.logo" mode="">
						</image>
					</view>
					<view class="right">
						<view class="rbox">
							<view class="text1 textsl1">
								{{data.options.length!=3?data.goodsdetali.business.name:$store.state.name}}
							</view>
							<view class="text2">
								<!-- <uni-icons type="star-filled" color="#FFC41F" size="15"></uni-icons> -->
								<uni-rate :disabled="true" disabledColor="#FFC41F" :value="data.options.length!=3?data.goodsdetali.business.star:5" />
							</view>
						</view>
						<view class="btns" v-if="data.options.length!=3"
							@click="$goURl('/pages/business/businessdetail?id='+data.goodsdetali.business.ID)">
							进入店铺
						</view>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="recommend box" :id="'scrollView'+data.nav_list[1].id">
				<view class="title">
					评价 <text @click="$goURl('/pages/commodity/evaluate?id='+data.goodsdetali.ID)">查看更多（{{data.Comments.length}}条评价）
						></text>
				</view>

				<scroll-view :scroll-x="true">
					<view class="evaluate">
						<view class="evaluateitem" v-for="item in data.Comments">
							<view class="evaluatetop">
								<view class="imgs">
									<image :src="item.user.head?item.user.head:$defaultAvatar" mode=""></image>
								</view>
								<view class="info">
									<view class="infoname">
										{{item.user.nickname}}
									</view>
									<view class="xing">
										<view class="xings" v-for="(items,index) in item.star">
											<image src="https://img.fubaozx.cn/static/oldImg/16995011701716.png" mode="aspectFill"></image>
										</view>
										<view class="xings" v-for="(items,index) in (5-item.star)">
											<image src="https://img.fubaozx.cn/static/oldImg/16995011968377.png" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
							<view class="evaluatebottom textsl2">
								{{item.content}}
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <empty v-if="data.Comments.length==0"></empty> -->

			</view>
			<!-- 详情 -->
			<view class="details box" :id="'scrollView'+data.nav_list[2].id">
				<view class="title">
					商品详情
				</view>

	<rich-text :nodes="data.goodsdetali.details" @itemclick="handleRich" ></rich-text>
				<!-- <view class="details" v-html="data.goodsdetali.details" > -->
				<!-- </view> -->
			</view>
			<!-- 别删 -->
			<view class="" style="height:50px;"></view>
		</scroll-view>
		<!-- 底部 -->
		<view class="goodsnav">
			<uni-goods-nav :fill="true" :options="data.options" :buttonGroup="data.buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		<!-- 规格 -->
		<uni-popup ref="popup" @maskClick="close">
			<view class="popup-content">
				<view class="top">
					<uni-icons type="closeempty" size="22" @click="close"></uni-icons>
				</view>
				<view class="goodsdetail">
					<view class="goodsimg">
						<image :src="data.goods.img?data.goods.img:data.goodsdetali.img" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="price">
							￥{{$toFiexd(data.goods.price+data.goods.coupon,2)}}
						</view>
						<view class="price" style="font-size: 14px;">
							<text style="margin-right: 10px;" >现金 {{$toFiexd(data.goods.price,2)}}</text>
							<text v-if="data.goods.coupon>0">{{data.goods.is_single==4?'DL':'ZKFC'}} {{$toFiexd(data.goods.coupon,2)}}</text>
						</view>
						<view class="stock">
							库存：{{data.goods.stock}}
						</view>
						<view class="specifications">
							规格：<text v-for="item in data.listckecks">{{item+ ' '}}</text>
						</view>
						<!-- <view class="stock">收货后获得积分：{{Number(data.goods.price)*5*Number(data.goodsdetali.discount)/100}}</view> -->
						<view class="stock" v-show="data.goodsdetali.is_pv==1">PV值：{{data.goods.pv}}</view>
					</view>
				</view>
				<view class="numbox">
					<view class="">
						数量
					</view>
					<uni-number-box v-model="data.number" />
				</view>
				<view class="specsbox" v-for="(item,index) in data.lists">
					<view class="title">
						{{item.attr}}
					</view>
					<view class="specslist">
						<view class="specsitem" v-for="(items,indexs) in item.val" :class="{active:data.listckeck[index]==indexs}"
							@click="ckeck(index,indexs)">
							{{items}}
						</view>
					</view>
				</view>
				<view class="buy" @click="create">
					{{data.buttonGroup[data.isbutton].text}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		nextTick,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
const {proxy} = getCurrentInstance();
	const data = reactive({
		id:0,
		listckecks: [],
		list: [],
		lists: [], //规格
		listckeck: [],
		statusbarHeight: uni.getSystemInfoSync().statusBarHeight, //刘海屏高度
		scrollTop: 0, //设置竖向滚动条位置
		goodsdetali: {},
		goods: {},
		numberValue: 0,
		nav_list: [{
				id: 1,
				text: '店铺',
				scrollId: "scrollView1"
			},
			{
				id: 2,
				text: '评价',
				scrollId: "scrollView2"
			},
			{
				id: 3,
				text: '详情',
				scrollId: "scrollView3"
			}
		],
		options: [
			{
				icon: 'heart-filled',
				text: '收藏',
				infoBackgroundColor: '#007aff',
				infoColor: "red",
				iconColor:''
			},{
			icon: 'shop',
			text: '店铺',
			infoBackgroundColor: '#007aff',
			infoColor: "red"
		}, {
			icon: 'cart',
			text: '购物车',
		},
		{
			icon: 'weixin',
			text: '客服',
		}],
		buttonGroup: [{
				text: '加入购物车',
				backgroundColor: '#FA301B',
				color: '#fff'
			},
			{
				text: '立即购买',
				backgroundColor: '#ffa200',
				color: '#fff'
			}
		],
		isbutton: 0,
		nav_id: null, //导航选中id
		scrollId: "",
		number: 1,
		transparency: 0, //透明度
		isDropDown: false, //下拉到临界点
		//临界值(图片高度-头部高度-刘海屏高度 250-50-刘海屏高度)
		criticalValue: 200 - uni.getSystemInfoSync().statusBarHeight,
		selectlist: [],
		attribute: '',
		Comments: [], //商品评价
		Commentstotal: 0, //商品评价总数
	})
	const popup = ref()
	onLoad((option) => {
		console.log('页面onLoad')
		data.id=Number(option.id)
		addGoodsComments(Number(option.id)) //商品评价
		proxy.$request({
			url: `api/goods_list_all/0/`,
			method: 'post',
			data: {
				id: Number(option.id),
			},
			success: (res) => {
				try{
					data.list =evalPro(res.data.img_list) //eval('(' +  + ')')
				}catch(e){


				}
				data.goodsdetali = res.data
				// data.favorites

				data.goodsdetali.details = res.data.details.replace(/\<img/gi, '<img style="max-width:100%;"');
				data.goodsdetali.details = data.goodsdetali.details.replace(/\<video/gi,
					'<video style="max-width:100%;"');
				data.lists = arr(res.data.attribute_list)
				if (!res.data.business.ID) {
					data.options = [
						{
						icon: 'heart-filled',
						iconColor:'',
						text: '收藏',
						infoColor: ""
					},
					{
						icon: 'cart',
						text: '购物车',
					},
					{
						icon: 'weixin',
						text: '客服',
					}]
				}


				data.listckecks=res.data.attribute_list[0].attr.map(item=>{
					return item.val
				})
				data.goods = {
					img: res.data.attribute_list[0].img,
					price: res.data.attribute_list[0].price,
					stock: res.data.attribute_list[0].stock,
					coupon: res.data.attribute_list[0].coupon,
					pv: res.data.attribute_list[0].pv,
					ID: res.data.attribute_list[0].ID
				}
				data.listckeck=[]
				data.lists.forEach(item=>{
					data.listckeck.push(0)
				})

				if(res.data.favorites==1){
					data.options[0].iconColor='red'
				}
			}
		})
	})
	onShow(() => {
		console.log('页面onShow')
	})
	function evalPro(str) {
	    var Fn = Function;
	    return new Fn('return ' + str)();
	}
	//预览图片
	function previewImage(url){
		uni.previewImage({
					urls:data.list,
					longPressActions: {
						itemList: ['保存图片到相册'],
						success: function(data) {
							console.log(data.tapIndex);
							if(data.tapIndex == 0){
								uni.saveImageToPhotosAlbum({
									filePath: imgPath,
									success: function () {
										uni.showToast({
											title: '保存成功',
											duration: 2000
										});
									}
								});
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
		});
	}
	function addGoodsComments(id) { //获取商品评价

		proxy.$request({
			url: `api/addGoodsComments/?id=${id}&page=1&size=10`,
			method: 'get',
			data: {
				id: id,
			},
			success: (res) => {
				data.Comments = res.data.data
				data.Commentstotal = res.data.total
			}
		})
	}
	function onClick (e) {
		console.log(e)
		if (e.content.text == '店铺') {
			proxy.$goURl('/pages/business/businessdetail?id=' + data.goodsdetali.business.ID)
		} else if(e.content.text == '收藏'){
			collect()
		} else if(e.content.text == '客服'){
			window.location.href = "https://work.weixin.qq.com/kfid/kfc5517f32f98889b84"
		}else{
			proxy.$goURl('/pages/cat/cat')
		}
	}
	const buttonClick = (e) => {
		data.isbutton = e.index
		popup.value.open('bottom')
	}

	// 点击收藏/取消收藏
	function collect() {
		proxy.$request({
			url: `api/favorites/`,
			method: 'POST',
			data: {
				goods_id: data.goodsdetali.ID
			},
			success: (res) => {
				if (res.errno == 0) {
					if(res.errmsg=='取消收藏'){
						data.options[0].iconColor=''
					}else{
						data.options[0].iconColor='red'
					}
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
				}
			}
		})
	}
	const create = () => { //创建订单
		if (data.goods.ID != 0) {
			let attribute_list = [{
				'price_id': data.goods.ID,
				'number': data.number
			}]
			if (data.isbutton) {
				proxy.$request({
					url: `api/order/`,
					method: 'post',
					data: {
						'attribute_list': attribute_list
					},
					success: (res) => {
						if (res.errno == 0) {
							popup.value.close()
							proxy.$goURl('/pages/order/createorder?id=' + res.data)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.errmsg
							})
						}
					}
				})
			} else {
				proxy.$request({
					url: `api/shoppingCart/`,
					method: 'post',
					data: {
						attribute_id: data.goods.ID,
						'number': data.number
					},
					success: (res) => {
						popup.value.close()
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
					}
				})
			}

		}
	}
	const ckeck = (a, b) => { //规格选择
		// console.log("选择完成", data.listckeck)
		data.listckeck[a] = b
		console.log("选择完成", data.listckeck,data.lists)
		let num = data.listckeck.filter(item => {
			return item >= 0
		}).length

		if (num == data.lists.length) {
			let attribute = ''
			data.listckeck.forEach((item, index) => {
				console.log(data.lists[index].id[item])
				attribute = attribute + data.lists[index].id[item] + (index < data.lists.length - 1 ? '|' : '')
			})
			let listsss = []
			data.lists.forEach((item, index) => {
				listsss.push(item.val[data.listckeck[index]])
			})
			data.listckecks = listsss
			console.log("选择完成", data.listckecks)
			data.attribute = attribute
			data.goods = data.goodsdetali.attribute_list.filter(item => {
				console.log(item.attribute , attribute)
				return item.attribute == attribute
			}).map(item => {
				return {
					img: item.img,
					coupon: item.coupon,
					pv: item.pv,
					price: item.price,
					stock: item.stock,
					ID: item.ID
				}
			})[0]
		}
	}
	// 规格排列组合
	const arr = (arr) => {
		var list = []
		arr[0]['attr'].forEach(f => {
			console.log()
			list.push({
				attr: f.attr,
				val: [],
				id: []
			})
			data.listckeck.push(-1)
		})
		arr.forEach(f => {
			f.attr.forEach(t => {
				for (var k = 0; k < list.length; k++) {
					if (list[k].attr == t.attr) {
						list[k].val.push(t.val)
						list[k].id.push(t.ID)
					}
				}
			})
		})
		for (var i = 0; i < list.length; i++) {
			list[i].val = [...new Set(list[i].val)]
			var s = []
			for (var k = 0; k < list[i].val.length; k++) {
				s.push(k == 0 ? 1 : 0)
			}
			data.selectlist.push(s)
		}
		list.forEach(item=>{
			item.id=Array.from(new Set(item.id))
		})
		return list
	}
	const open = () => { //规格
		popup.value.open('bottom')
	}
	const close = () => {
		popup.value.close()
	}
	//scroll-view滚动触发
	const scroll = (e) => {
		const scrollTop = e.detail.scrollTop
		calcSize()
		const tabs = data.nav_list.filter(item => item.top <= scrollTop).reverse();
		if (tabs.length > 0) {
			data.nav_id = tabs[0].id;
		}
		data.transparency = e.detail.scrollTop / data.criticalValue
		if (!data.isDropDown && e.detail.scrollTop >= data.criticalValue) {
			data.isDropDown = true
		} else if (data.isDropDown && e.detail.scrollTop < data.criticalValue) {
			data.isDropDown = false
			data.nav_id = null
		}
	}
	//计算高度
	const calcSize = (event) => {
		let h = 0;
		let height = 0
		nextTick(function() {
			let infos = uni.createSelectorQuery().select(".commodity")
			infos.boundingClientRect((datas) => {
				height = datas.height
				data.nav_list.forEach(item => {
					let view = uni.createSelectorQuery().select(`#${item.scrollId}`);
					view.fields({
						size: true
					}, data => {
						if (data != null) {
							item.top = h + height - 50 - uni.getSystemInfoSync().statusBarHeight + 10 * item.id;
							h += data.height
							item.bottom = h;
						}
					}).exec();
				})
			}).exec()
		})


	}
	//点击头部标题
	const changNavId = (item) => {
		if (!data.isDropDown) return
		data.nav_id = item.id
		//scroll-into-view滚动到指定view会有头部高度的误差 用scroll-top来取代
		// data.scrollId = item.scrollId
		data.nav_list.forEach(n => {
			if (n.id == item.id) {
				data.scrollTop = String(item.top)
			}

		})
	}
	//返回
	const getback = () => {
		if (getCurrentPages().length > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
	//分享
	const share = () => {
		uni.setClipboardData({
			data:proxy.$share+'pages/commodity/details?id='+data.id ,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				})
			}
		});

	}
	//处理点击事件
	const handleRich = (e)=>{
		// console.log(e.detail.node.attrs.src,e);
		let imgPath = e.detail.node.attrs.src;
		handlePreViewImage(imgPath);
	}
	//预览和长按保存图片
	const handlePreViewImage = (imgPath)=>{
		let arr = [];
		arr.push(imgPath);
		uni.previewImage({
			urls: arr,
			longPressActions: {
				itemList: ['保存图片到相册'],
				success: function(data) {
					console.log(data.tapIndex);
					if(data.tapIndex == 0){
						uni.saveImageToPhotosAlbum({
							filePath: imgPath,
							success: function () {
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						});
					}
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding-bottom: 60px;
	}

	.header {

		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

		.flex {
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			width: calc(100% - 40upx);
			height: 100rpx;

		}

		.nav {
			display: flex;
			align-items: center;

			.navitem {
				margin-left: 30px;
				font-size: 30rpx;
			}

			.navitem:first-child {
				margin-left: 0;
			}
		}

		.round {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			width: 70rpx;
			height: 70rpx;
		}
	}

	.commodity {
		width: 100%;
		// height: 700rpx;

		.swiper {
			width: 100%;
			height: 500rpx;
		}

		image {
			width: 100%;
			height: 500rpx;

		}

		.commoditybox {
			background-color: #fff;
			padding: 30upx;
			border-radius: 0 0 30upx 30upx;

		.price {
			color: #FA301B;
			display: flex;
			font-size: 46upx;
			font-weight: bold;
			align-items: flex-end;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;

				.prices {
					text-decoration: line-through;
					color: #999;
					font-size: 24upx;
					font-weight: 400;
					margin-left: 20upx;
					display: flex;
					align-items: flex-end;
				}
			}

			.right {
				font-size: 24rpx;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				color: #999999;
				font-weight: 400;
			}

		}
			text {
				font-size: 24rpx;
				margin-left: 20rpx;
				color: #FA301B;
			}
			.namebox {
				padding: 30upx;
				border-radius: 20upx;
				border: 1upx solid #F5F5F5;
				margin-top: 30upx;

				.name {
					font-size: 32upx;
					font-weight: bold;
					color: #333;
				}

				.nbb {
					display: flex;
					justify-content: space-between;
					margin-top: 20upx;

					.left {

						text:nth-child(1) {
							background-color: #FFF5F5;
							color: #FA301B;
							font-size: 20upx;
							padding: 5upx 20upx;
							border-radius: 5upx;
						}

						text:nth-child(2) {
							color: #666;
							font-size: 24upx;
							margin-left: 10upx;
						}
					}
				}
			}

		}
	}

	.box {
		margin-top: 20rpx;
		width: calc(100% - 40rpx);
		// margin-left: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		// height: 600px;

		.title {
			// text-align: center;
			font-weight: bold;
			font-size: 32upx;
			color: #333;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 24upx;
				color: #999;
				font-weight: 500;
			}
		}

		.evaluate {
			display: flex;
			margin-top: 30upx;

			.evaluateitem {
				background-color: #F5F5F5;
				padding: 20upx;
				margin-right: 20upx;
				border-radius: 20upx;

				.evaluatetop {
					display: flex;

					.imgs {
						image {
							width: 80upx;
							height: 80upx;
							border-radius: 50%;
						}
					}

					.info {
						margin-left: 20upx;

						.infoname {
							font-size: 28upx;
							font-weight: bold;
						}

						.xing {
							display: flex;

							.xings {
								margin-right: 10upx;

								image {
									width: 30upx;
									height: 30upx;
								}
							}
						}
					}

				}

				.evaluatebottom {
					width: 360upx;
					font-size: 24upx;
					height: 60upx;
				}
			}
		}

		.details {
			margin-top: 20upx;

			::v-deep img {
				max-width: 100% !important;
			}

			::v-deep image {
				max-width: 100% !important;
			}

			::v-deep video {
				max-width: 100% !important;
			}
		}

		.business {
			margin: 30upx 0;
			display: flex;

			.businessimage {
				width: 100upx;
				height: 100upx;
				margin-right: 20upx;

				image {
					width: 100upx;
					height: 100upx;
					border-radius: 20upx;
				}
			}

			.right {
				width: calc(100% - 120upx);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rbox {
					width: calc(100% - 180upx);
					.text1 {
						font-size: 32upx;
						font-weight: bold;
					}

					.text2 {
						font-size: 28upx;
						margin-top: 20upx;
					}
				}

				.btns {
					background-color: $color1;
					padding: 10upx 20upx;
					border-radius: 30upx;
					color: #fff;
					font-size: 24upx;
				}
			}
		}
	}

	.goodsnav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.popup-content {
		background-color: #fff;
		padding: 30upx;
		border-radius: 30upx 30upx 0 0;

		.top {
			display: flex;
			justify-content: flex-end;
		}

		.goodsdetail {
			display: flex;

			.goodsimg {
				width: 200upx;
				height: 200upx;
				margin-right: 20upx;

				image {
					width: 200upx;
					height: 200upx;
					// background-color: aqua;
					border-radius: 20upx;
				}
			}

			.right {
				.price {
					color: red;
					font-size: 36upx;
				}

				.stock {
					color: #999;
					font-size: 26 upx;
					margin: 20upx 0;
				}

				.specifications {
					font-size: 28upx;
				}
			}
		}

		.numbox {
			display: flex;
			justify-content: space-between;
			margin-top: 40upx;
		}

		.specsbox {
			margin-top: 40upx;

			.title {}

			.specslist {
				display: flex;
				flex-wrap: wrap;

				.specsitem {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 10upx;
					border: 1upx solid #999;
					color: #999;
					margin-right: 20upx;
					margin-top: 20upx;
				}

				.active {
					background-color: rgba(255, 0, 0, 0.1);
					border: 1upx solid #FA301B;
					color: #FA301B;
				}
			}
		}

		.buy {
			background-color: #FA301B;
			color: #fff;
			padding: 20upx;
			text-align: center;
			border-radius: 40upx;
			margin-top: 40upx;

		}
	}
</style>
